<template>
  <div style="margin: 0 auto; width: 100%">
    <a-list
      class="list-demo-action-layout"
      :gridProps="{ gutter: -450, span: 12 }"
      item-layout="horizontal"
      :bordered="false"
      :split="false"
      :data="dataList"
      :showSizeChanger="true"
      :pagination-props="{
        showJumper: true,
        showPageSize: true,
        pageSize: searchParams.pageSize,
        current: searchParams.current,
        pageSizeOptions: customPageSizeOptions,
        total,
      }"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
    >
      <template #item="{ item }">
        <div
          style="
            background-color: #ffffff;
            width: 400px;
            height: 130px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px auto 15px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
          "
        >
          <a-list-item class="list-demo-item" action-layout="vertical">
            <a-list-item-meta>
              <template #avatar>
                <a-avatar
                  :size="86"
                  style="margin-left: 15px"
                  :image-url="item.userAvatar"
                ></a-avatar>
              </template>
              <template #title>
                <div style="display: flex; align-items: center; width: 260px">
                  <h2 class="item-title" style="margin-top: -5px">
                    {{ item.userName }}
                  </h2>
                </div>
              </template>
              <template #description>
                <a-space wrap align="start" class="item-tags" v-if="item.tags">
                  <a-tag
                    v-for="(tag, index) of JSON.parse(item.tags)"
                    :key="index"
                    color="gray"
                    bordered
                    style="border-radius: 10px"
                  >
                    {{ tag }}
                  </a-tag>
                </a-space>
                <a-space wrap align="start" class="item-tags" v-else>
                  <a-tag color="gray" bordered style="border-radius: 10px"
                    ># 未设置技能
                  </a-tag>
                </a-space>
                <span v-if="item.userProfile" class="item-description">
                  {{ item.userProfile }}
                </span>
                <span v-else class="item-description">
                  这个up懒死了🐔，什么都木有写🏀⚈₃⚈
                </span>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </div>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref, watchEffect, withDefaults } from "vue";
import {
  QuestionControllerService,
  UserControllerService,
  UserQueryRequest,
} from "../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRoute } from "vue-router";

const route = useRoute();

/*interface Props {
  userList: any[];
  userTotal: number;
}

/!**
 * 从搜索页父组件获取数据
 *!/
const props = withDefaults(defineProps<Props>(), {
  userList: () => [],
  userTotal: () => 0,
});*/

const searchParams = ref<UserQueryRequest>({
  userName: "",
  pageSize: 20,
  current: 1,
});

const dataList = ref([]);
const total = ref(0);

const loadData = async () => {
  const res = await UserControllerService.listUserVoByPageUsingPost(
    searchParams.value
  );
  if (res.code === 0) {
    dataList.value = res.data.records;
    total.value = res.data.total;
  } else {
    message.error("加载失败：" + res.message);
  }
};

/**
 * 监听 searchParams 变量，改变是触发页面的更新加载
 */
watchEffect(() => {
  searchParams.value = {
    ...searchParams.value,
    userName: route.query.searchText,
  } as any;
  loadData();
});

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});

const customPageSizeOptions = ref([20, 30, 40, 50]);
const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};
const onPageSizeChange = (pageSize: number) => {
  searchParams.value = {
    ...searchParams.value,
    pageSize: pageSize,
  };
};
</script>

<style scoped>
.list-demo-action-layout .image-area {
  width: 190px;
  height: 150px;
  border-radius: 2px;
  overflow: hidden; /* 限制图片溢出容器 */
  margin-right: 18px;
  margin-top: 10px;
}

.list-demo-action-layout .image-area img {
  width: 100%;
}

.list-demo-action-layout .arco-list-item-action .arco-icon {
  margin: 0 4px;
}

.list-demo-item .item-title {
  text-align: left;
  margin-bottom: 2px; /* 调整标题与描述之间的底部间距 */
}

.list-demo-item .item-description {
  height: 20px;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1; /* 最大显示行数 */
  line-clamp: 1; /* 最大显示行数 */
  color: #61666d;
}

.item-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.list-demo-action-layout .arco-list-item {
  border-radius: 4px;
}

.action:hover {
  background: var(--color-fill-3);
}
</style>
